<template>
  <el-dialog
    width="600"
    v-model="state.visible"
    :close-on-click-modal="false"
    destroy-on-close
    draggable
  >
    <template v-if="state.actionType == 'detail'">
      <el-descriptions title="设备标签信息" :column="2">
        <el-descriptions-item label="标签名称:">
          {{ state.itemDetail.tagName }}
        </el-descriptions-item>
        <el-descriptions-item label="状态:">
          <dict-tag
            style="width: 50px; display: inline-block"
            :options="sys_common_staus"
            :value="state.itemDetail?.enable ? 1 : 0"
          />
        </el-descriptions-item>
        <el-descriptions-item label="操作人:">
          {{ state.itemDetail.updateOper || state.itemDetail.createOper }}
        </el-descriptions-item>
        <el-descriptions-item label="操作时间:">
          {{ state.itemDetail.updateTime || state.itemDetail.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="城市标签:">
          {{ state.itemDetail.cityName }}
        </el-descriptions-item>
      </el-descriptions>
    </template>

    <template v-else>
      <el-form ref="dialogFormRef" :model="state.formModel" :rules="state.formRules">
        <el-form-item label="标签名称" prop="tagName">
          <el-input maxLength="50" style="width: 220px" v-model.trim="state.formModel.tagName" />
        </el-form-item>
        <el-form-item label="城市标签" prop="cityName">
          <el-select v-model="state.formModel.cityName" fit-input-width placeholder="请选择">
            <el-option
              v-for="item in cityNameOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </template>

    <template #footer>
      <template v-if="state.actionType == 'detail'">
        <el-button @click="handleAction(false)">关闭</el-button>
      </template>

      <template v-else>
        <el-button @click="handleAction(false)">取消</el-button>

        <el-button :loading="state.loading" type="primary" @click="handleAction(true)">
          {{ state.actionType == 'add' ? '新增' : '更新' }}
        </el-button>
      </template>
    </template>
  </el-dialog>
</template>

<script setup>
import { formRules } from '@/utils/valid/formRules'
import { ElMessage } from 'element-plus'
import { updateDeviceTag, addDeviceTag } from '@/api/device/tag'
import { useDict } from '@/utils/dict'
import { handleUpdConfirm } from '@/utils/tools'
import useGlobalStore from '@/store/modules/global'

const globalStore = useGlobalStore()
const cityNameOptions = computed(() => globalStore.myCityList)

const { sys_common_staus } = useDict('sys_common_staus')

const emit = defineEmits(['refresh'])

const dialogFormRef = ref()
const state = reactive({
  loading: false,
  visible: false,
  formModel: {},
  formRules: {
    tagName: formRules.set('请输入'),
    cityName: formRules.set('请选择')
  },
  actionType: 'add',
  itemDetail: {}
})

function handleAction(confirm) {
  if (confirm) {
    dialogFormRef.value?.validate((valid) => {
      if (valid) {
        const isAdd = state.actionType == 'add'
        handleUpdConfirm(isAdd, '确认要修改当前设备标签？').then(() => {
          state.loading = true

          const fetchMethod = isAdd ? addDeviceTag : updateDeviceTag
          fetchMethod(state.formModel)
            .then(() => {
              ElMessage.success(isAdd ? '新增成功' : '更新成功')

              onHide()
              emit('refresh')
            })
            .finally(() => {
              state.loading = false
            })
        })
      }
    })
  } else {
    onHide()
  }
}

function onHide() {
  state.itemDetail = {}
  state.visible = false
  dialogFormRef.value?.resetFields()
}

function init(obj = {}) {
  if (obj.actionType) {
    const { actionType, ...data } = obj
    state.actionType = actionType

    if (actionType == 'detail') {
      state.itemDetail = data
    } else {
      state.formModel = data
    }

    state.visible = true
  }
}

defineExpose({ init })
</script>
